<template>
  <div class="notice-bar" v-if="show">
    <div class="bar-blank"></div>
    <div class="bar-fixed" :class="{ review: account.status === 1 }">
      <div class="bar-content" v-if="account.status === 0">
        <span class="text">您的账号未认证，认证后解锁更多服务</span>
        <a-button
          type="primary"
          size="small"
          ghost
          @click="$router.push('/auth/home')"
        >
          去认证
        </a-button>
      </div>

      <div class="bar-content" v-else-if="account.status === 2">
        <span class="text">
          您的认证资料审核不通过，待重新提交材料。原因如下：{{ account.reason }}
        </span>
        <a-button type="primary" size="small" ghost @click="authAgain">
          重新认证
        </a-button>
      </div>

      <div class="bar-content" v-else-if="account.status === 1">
        <span class="text">
          您的认证资料正在审核中，预计 2 小时内审核完成
        </span>
        <a-button type="primary" size="small" ghost @click="openWechat">
          联系商务加急审核
        </a-button>
      </div>

      <div class="bar-content" v-else-if="publish.length">
        <span class="text">
          您有预约投放任务未审核通过哦，原因如下：{{ publish[0].content }}
        </span>
        <a-button
          type="primary"
          size="small"
          ghost
          @click="goPublish(publish[0])"
        >
          去看看
        </a-button>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
import { getAccountNews } from "@/api/account";
import { isLogin } from "@/utils/auth";

export default {
  computed: {
    ...mapGetters(["account"]),
    show() {
      if (isLogin()) {
        return this.account.status !== 10 || this.publish.length;
      }

      return false;
    }
  },
  watch: {
    $route(val, prev) {
      if (prev) {
        if (val.path.split("/").length <= 2 && isLogin()) {
          this.getAccountAction();
        }
      }
    }
  },
  data() {
    return {
      publish: [],
      list: []
    };
  },
  methods: {
    isLogin,
    ...mapActions(["getAccountAction"]),
    openWechat() {
      this.$refs.wechat.open();
    },
    authAgain() {
      if (this.account.domain == 1) {
        this.$router.push("/auth/merchant");
      } else {
        const authors = this.list.filter(item => item.type === 1001);
        this.$router.push("/auth/author?id=" + authors[0].extend);
      }
    },
    async getAccountNews() {
      const res = await getAccountNews();
      this.list = res.data.list;
      this.publish = res.data.list.filter(item => item.type === 2001);
    },
    goPublish(item) {
      this.$router.push("/publish/" + item.extend);
    }
  },
  created() {
    if (isLogin()) {
      this.getAccountNews();
    }
  }
};
</script>

<style lang="less" scoped>
.notice-bar {
  .bar-blank {
    height: 44px;
  }

  .bar-fixed {
    top: @header-height;
    z-index: 100;
    position: fixed;
    left: 0;
    right: 0;
    background: @primary-2;

    &.review {
      background: #fef6e7;
    }

    .bar-content {
      width: @base-width;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 44px;
      margin: 0 auto;

      .text {
        margin-right: 6px;
      }
    }
  }
}
</style>
